<template>
  <view>
    <u-count-down
      :time="getTime"
      :format="format"
      @finish="handleFinish"
      @change="onChange"
    >
      <slot> </slot>
    </u-count-down>
  </view>
</template>

<script>
  export default {
    name: 'yy-count-down',
    props: {
      time: {
        type: [String, Number] //秒
      },
      format: {
        type: String,
        default: 'HH:mm:ss'
      }
    },
    data() {
      return {}
    },
    computed: {
      getTime() {
        let time = this.time
        time = this.$utils.isNaNStr(time)
        return time * 1000
      }
    },

    methods: {
      handleFinish() {
        // #ifdef MP-TOUTIAO
        if (this.finish) {
          this.$emit('complete')
        }
        // #endif
        // #ifndef MP-TOUTIAO
        this.$emit('complete')
        // #endif
      },
      onChange(e) {
        if (
          e.days === 0 &&
          e.hours === 0 &&
          e.minutes === 0 &&
          e.seconds === 0 &&
          e.milliseconds === 0
        ) {
          setTimeout(() => {
            this.finish = true
          }, 1500)
        }
        this.$emit('timeChange', e)
      }
    }
  }
</script>
<style lang="scss"></style>
